<template>
  <!-- App -->
  <div id="app">

    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>
    <f7-view main url="/tabs/">
    </f7-view>
  </div>
</template>

<script>
  import Tab1 from './pages/tab1.vue'
  import Tab2 from './pages/tab2.vue'
  import Tab3 from './pages/tab3.vue'

  export default {
    components: {
      'tab1': Tab1,
      'tab2': Tab2,
      'tab3': Tab3
    },
    created () {
      document.addEventListener('deviceready', this.onDeviceReady, false)
    },
    methods: {
      onDeviceReady () {
        document.addEventListener('backbutton', this.onBackKeyDown, false)
      },
      onBackKeyDown: function () {
        // 获取当前view this.$f7.views.main.router.url  this.$$('.modal-in').length  this.$f7.views.current.router.b
        const myApp = this.$f7
        console.log('this', this)
        console.log('myApp', this.$f7)
        console.log('tabs', myApp.views.tabs)
//        alert(myApp.views.main.router.url)
//        alert(myApp.views.current.router.url)
        if (this.$$('.modal-in').length > 0) {
          alert('modal-in');
          myApp.dialog.close()
          return false
        } else if (myApp.views.current.router.url.indexOf('index.html') > 0) {
          myApp.dialog.confirm('你确定要退出?', '提示', () => {
            navigator.app.exitApp()
          })
        } else {
          myApp.views.current.router.back()
        }
      },
      handleClick () {
        console.log('handleClick', this)
      }
    }
  }
</script>
